<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户中心</title>
    <link rel="apple-touch-icon" href="../static/assets/images/favicon.png" type="image/x-icon">
    <link rel="icon" href="../static/assets/images/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="../static/assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="../static/assets/css/animation.css">
    <link rel="stylesheet" href="../static/assets/css/cropper.css">
    <link rel="stylesheet" href="../static/assets/css/base.css">
    <link rel="stylesheet" href="../static/assets/css/website-page.css">
    <link rel="stylesheet" href="../static/assets/css/admin-page.css">
    <script src="../static/assets/js/jquery.js"></script>
    <script src="../static/assets/js/cropper.min.js"></script>
</head>
<body>
    <div class="wrapper admin-body"><!-- 注意：点击右侧导航收缩按钮时wrapper加类名mini-navbar搜索栏 -->
        <header id="header" class="header pr" role="banner">
             <nav class="header-navbar" role="navigation"><!-- 滚动条往下滚动页面的时候头部固定效果 加类名fixed-top-->
                <div class="navbar-top">
                     <div class="container clearfix">
                        <div class="navbar-left fl">
                           <div>欢迎来到BTSO3.0主题网站 <span class="ml20"><i class="fa fa-phone mr5"></i>技术服务热线：400-820-7719</span><span class="head_phonetxt"><span class="top_text ml50">当前所在企业：上海市电力公司-国家电网  </span><!-- <span class="top_text ml20">联系电话：138166999999</span> --></span></div>
                        </div>
                        <div class="navbar-right fr">
                          <span class="navbar-login none">
                            <a href="login.html"><i class="fa fa-user mr5"></i>登录</a>
                            <a href="phone-register.html"><i class="fas fa-sign-in mr5 ml20"></i>注册</a>
                          </span>
                          <!-- 登录后状态 去掉none即可-->
                          <span class="navbar-user "><a href="../用户中心/admin-index.html"><i class="fa fa-user mr10"></i>张三，注册会员，下午好</a><a href="javascript:;" class="loginuser-exit">退出</a></span>
                        </div>
                     </div>
                </div>
                <div class="sticky-wrapper nav-bgcol">
                   <div class="container">
                      <div class="navbar-header clearfix pr">
                         <button type="button" id="navbar-phone" class="navbar-toggle navbar-btn btn-icon btn-circle pull-right collapsed">
                            <span class="fa fa-reorder"></span>
                         </button>
                         <a class="navbar-brand" href="index.html"><img src="../static/assets/images/logo.png" alt=""></a>
                         <button type="button" class="navbar-btn btn-icon btn-circle pull-right last visible-sm visible-xs"><i class="fa fa-search"></i></button>
                         <button type="button" class="navbar-btn btn-icon btn-circle pull-right visible-sm visible-xs"><i class="fa fa-shopping-cart"></i></button>
                         <button type="button" class="navbar-btn btn-icon btn-circle pull-right visible-sm visible-xs"><i class="fa fa-pencil-square-o"></i></button>
                         <button type="button" class="navbar-btn btn-icon btn-circle pull-right last visible-sm visible-xs"><i class="fa fa-bell"></i></button>
                         <ul class="navbar-navphone none"> <!-- navbar-phone该层点击的时候toggle none -->
                           <li><a href="../index.html">首页</a></li>
                           <li class="pr">
                            <a href="#">产品中心</a>
                            <ul class="">
                              <li>
                                <a class="dropdown-item" href="static-index.html">北塔BTSO 智慧运维平台</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="industry-case.html">北塔BTDO 业务保障系统</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="data-download.html">北塔BTSM IT服务管理系统</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="#">北塔BTIM IT综合管理软件</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="trial-apply.html">北塔BTRM IT资源管理系统</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="version-contrast.html">北塔BTDM 数据流分析系统</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="version-upgrade.html">EMonitor 监控管家</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="version-upgrade.html">北塔BTCM IT运维集中管理软件</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="version-upgrade.html">北塔BTNM 网络运维管理系统</a>
                              </li>
                              <li>
                                <a class="dropdown-item" href="version-upgrade.html">北塔BTDP</a>
                              </li>
                            </ul>
                          </li>
                          <li>
                            <a href="product-404.html" class="dropdown-toggle">解决方案</a>
                          </li>
                          <li>
                            <a href="#" class="dropdown-toggle">注册管理</a>
                          </li>
                          <li>
                            <a href="#" class="dropdown-toggle">互动社区</a>
                          </li>
                          <li>
                            <a href="#" class="dropdown-toggle">技术支持</a>
                          </li>
                          <li>
                            <a href="admin-index.html" class="dropdown-toggle">用户中心</a>
                          </li>
                        </ul>
                      </div>
                      <div class="collapse navbar-collapse" id="main-navbar-container">
                        <ul class="nav navbar-nav pr hidden-md">
                          <li class="active">
                            <a href="../index.html" class="dropdown-toggle">首页<em>/</em></a>
                          </li>
                          <li class="dropdown">
                            <a href="product-center.html" class="dropdown-toggle">产品中心<em>/</em></a>
                            <div class="nav-menu-area clearfix">
                              <ul class="single-mega-item">
                                <li class="block">智慧运维专家</li>
                                <li><a href="../产品中心/common-problem.html">北塔BTSO 智慧运维平台</a></li>
                                <li><a href="#">北塔BTDO 业务保障系统</a></li>
                                <li><a href="#">北塔BTSM IT服务管理系统</a></li>
                                <li><a href="#">北塔BTIM IT综合管理软件</a></li>
                                <li><a href="#">北塔BTRM IT资源管理系统</a></li>
                                <li><a href="#">北塔BTDM 数据流分析系统</a></li>
                              </ul>
                              <ul class="single-mega-item">
                                <li class="block">轻量级监控管家</li>
                                <li><a href="#">EMonitor 监控管家</a></li>
                                <li><a href="#">北塔BTCM IT运维集中管理软件</a></li>
                                <li><a href="#">北塔BTNM 网络运维管理系统</a></li>
                              </ul>
                              <ul class="single-mega-item">
                                <li class="block">基础平台</li>
                                <li><a href="#">北塔BTDP</a></li>
                              </ul>
                            </div>
                          </li>
                          <li>
                            <a href="product-404.html" class="dropdown-toggle">解决方案<em>/</em></a>
                          </li>
                          <li>
                            <a href="#" class="dropdown-toggle">注册管理<em>/</em></a>
                          </li>
                          <li>
                            <a href="#" class="dropdown-toggle">互动社区<em>/</em></a>
                          </li>
                          <li>
                            <a href="../云端百货/vip-list.html" class="dropdown-toggle">云端百货<em>/</em></a>
                          </li>
                          <li>
                            <a href="#" class="dropdown-toggle">技术支持<em>/</em></a>
                          </li>
                          <li>
                            <a href="../企业账户/admin-index.html" class="dropdown-toggle">企业账户</a>
                          </li>
                        </ul>
                        <div class="dropdown cart-dropdown navbar-right hidden-sm hidden-xs">
                          <button type="button" title="消息" class="navbar-btn btn-icon btn-circle dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i><span class="circle-red">2</span></button>
                        </div>
                        <!-- <div class="dropdown cart-dropdown navbar-right hidden-sm hidden-xs">
                          <button type="button" title="购物车" class="navbar-btn btn-icon btn-circle dropdown-toggle" data-toggle="dropdown"><i class="fa fa-shopping-cart"></i></button>
                        </div> -->
                        <div class="dropdown cart-dropdown navbar-right hidden-sm hidden-xs">
                          <button type="button" title="反馈" class="navbar-btn btn-icon btn-circle navbar-right last" data-toggle="collapse" data-target="#header-search-form"><i class="fa fa-pencil-square-o"></i></button>
                        </div>
                        <div class="dropdown hidden-sm hidden-xs btn-search pr"><!-- 点击搜索按钮加类名active -->
                          <button type="button" title="搜索" class="navbar-btn btn-icon btn-circle navbar-right last" data-toggle="collapse" data-target="#header-search-form"><i class="fa fa-search"></i></button>
                          <div class="search-box">
                            <input type="text" class="search-input">
                            <i class="fa fa-arrow-circle-o-right"></i>
                          </div>
                        </div>
                      </div>
                   </div>
                </div> 
             </nav>
        </header>
        <section class="section gray-section">
            <div class="container clearfix">
                <nav class="navbar-static-side" role="navigation">
                    <div class="sidebar-collapse">
                        <ul class="nav metismenu" id="side-menu">
                            <li class="nav-header active">
                                <div class="dropdown profile-element">
                                    <img alt="image" class="rounded-circle" src="../static/assets/images/profile_small.jpg"/>
                                    <div class="nav-right-user">
                                        <a href="admin-index.html">用户中心</a>
                                    </div>
                                </div>
                            </li>
                            <li>
                              <ul class="nav nav-second-level collapse in mt20"><!-- 默认隐藏时去掉in -->
                                  <!-- <li><a href="account-manage.html">账号管理</a></li> -->
                                  <li><a href="my-message.html">我的消息</a></li>
                                  <li><a href="my-collection.html">我的收藏</a></li>
                                  <li><a href="my-consult.html">我的咨询</a></li>
                                  <li><a href="my-answer.html">我的回答</a></li>
                                  <li><a href="my-upload.html">我的上传</a></li>
                                  <!-- <li><a href="todo-list.html">待办事项</a></li> -->
                                  <li><a href="my-integral.html">个人积分</a></li>
                                  <li><a href="personal-setting.html">个人设置</a></li>
                              </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="page-wrapper">
                    <div class="border-bottom page-heading">
                        <div class="page-headbox">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="admin-index.html">首页</a>
                                </li>
                                <li class="breadcrumb-item active">
                                    <strong>用户中心</strong>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <div class="wrapper-content">
                        <div class="page-ibox">
                            <div class="ibox-content">
                              <div class="pr min-vh-20">
                                <div class="user-bg-holder"></div>
                                <div class="avatar-profile pr">
                                 <i class="fa fa-camera"></i>
                                  <img class="userimg-thumbnail" src="../static/assets/images/user-1.jpg" width="200" alt="">
                                </div>
                              </div>
                              <div class="user-center-box clearfix">
                                  <div class="user-box-name">
                                      <div class="user-namebox">
                                        <div class="work-titlename">
                                          <span class="user-cnt-tit"><em>Administrator</em><i class="fa fa-pencil"></i></span>
                                          <div class="pr work-editform">
                                            <input class="work_editname form-control" type="text" value="">
                                            <div class="workedit_btn">
                                              <a href="javascript:;" class="true btn icon-btn btn-sm btn-outline-secondary"><i class="fa fa-check-circle"></i></a>
                                              <a href="javascript:;" class="false btn icon-btn btn-sm btn-outline-secondary"><i class="fa fa-times-circle"></i></a>
                                            </div>
                                          </div>
                                        </div>
                                        <p>真实姓名</p>
                                      </div>
                                  </div>
                                  <div class="user-box-cnt">
                                      <p><span><i class="fa fa-mobile"></i>手机号：13112025025</span></p>
                                      <p><span><i class="fa fa-clock-o"></i>上次登录时间：2018-10-15 15:32:26</span></p>    
                                      <p><span><i class="fa fa-star"></i>企业会员等级：SVIP会员</span></p>
                                      <p><span><i class="fa fa-lock"></i>账号属性：管理员账号</span></p>
                                  </div>
                              </div>
                            </div>
                        </div>
                        <div class="page-ibox">
                            <p class="page-ibox-title clearfix"><!-- 注：点击编辑按钮，层page-ibox-title加类名on -->
                                <span>企业基本信息</span>
                                <a href="#" class="fr btn btn-green btn-edit">编辑</a> <!-- 注：点击编辑按钮，层page-ibox-title加类名on 确认取消按钮显示-->
                                <a href="#" class="fr btn btn-gray btn-cancel">取消</a>
                                <a href="#" class="fr btn btn-green btn-sure">确认</a>
                            </p>
                            <div class="ibox-content">
                                <div class="enterprise-box clearfix">
                                    <div class="enterprise-box-right">
                                        <div class="enterprise-logoimg">
                                            <img src="../static/assets/images/logo1.png" alt="">
                                        </div>
                                        <div class="pr logoimg-upload">
                                            <a href="javascript:;">修改企业logo</a>
                                            <input type="file" class="img-upload">
                                        </div>
                                        <p>支持jpg/png格式图片，文件需小于2M</p>
                                    </div>
                                    <ul class="enterprise-box-left">
                                        <li>
                                            <label>PUID：</label>
                                            <input type="text" class="form-control disabled" value="DP001502232201" readonly>
                                            <span class="form-errortxt">错误信息！</span>
                                        </li>
                                        <li>
                                            <label>企业名称：</label>
                                            <input type="text" class="form-control disabled" value="上海北塔有限公司" readonly>
                                        </li>
                                        <li>
                                            <label>使用部门：</label>
                                            <input type="text" class="form-control disabled" value="信息科" readonly>
                                        </li>
                                        <li>
                                            <label>企业地址：</label>
                                            <input type="text" class="form-control disabled" value="宜山路600号" readonly>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="page-ibox">
                            <p class="page-ibox-title clearfix">
                                <span>产品维护信息</span>
                                <a href="#" class="fr btn btn-green btn-edit">编辑</a> <!-- 注：点击编辑按钮，层page-ibox-title加类名on 确认取消按钮显示-->
                                <a href="#" class="fr btn btn-gray btn-cancel">取消</a>
                                <a href="#" class="fr btn btn-green btn-sure">确认</a>
                            </p>
                            <div class="ibox-content">
                                <div class="product-box clearfix">
                                    <ul class="product-box-left">
                                        <li>
                                            <label>平台产品名称：</label>
                                            <input type="text" class="form-control disabled" readonly value="北塔智慧运维管理平台BTSO3.0">
                                        </li>
                                        <li>
                                            <label>对应厂商销售：</label>
                                            <input type="text" class="form-control disabled" readonly value="张三">
                                        </li>
                                        <li>
                                            <label>对应厂商技术：</label>
                                            <input type="text" class="form-control disabled" readonly value="李四">
                                        </li>
                                        <li>
                                            <label>企业产品管理：</label>
                                            <input type="text" class="form-control disabled" readonly value="李四">
                                        </li>
                                    </ul>
                                    <ul class="product-box-left">
                                        <li>
                                            <label>联系电话：</label>
                                            <input type="text" class="form-control disabled" readonly value="131234566778">
                                        </li>
                                        <li>
                                            <label>联系电话：</label>
                                            <input type="text" class="form-control disabled" readonly value="131234566778">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <footer class="footer">
          <div class="footer-copyright">
            <div class="container clearfix">
              <div class="foot-logo">
                <img src="../static/assets/images/logo_foot.png" alt="">
              </div>
              <div class="foot-right fr">
                <ul class="copyright-menu clearfix">
                  <li><a href="#">法律声明</a></li>
                  <li>|</li>
                  <li><a href="#">关于北塔</a></li>
                  <li>|</li>
                  <li><a href="#">联系我们</a></li>
                  <li>|</li>
                  <li><a href="#">会员权益介绍</a></li>
                  <li>|</li>
                  <li><a href="#">管理员创建</a></li>
                  <li>|</li>
                  <li><a href="#">返回首页</a></li>
                </ul>
                <div class="copyright-txt">
                  <span>2001-2018 © 上海北塔软件股份有限公司版权所有</span>
                  <span class="ml20">沪ICP备09033812号</span>
                </div>
              </div>
            </div>
          </div>
        </footer>
    </div>
    <div class="modal fade in upload-modal" style="display: none; left: 50%; margin-left: -350px; right:auto; top: 20px;"><!-- style里的属性值正式用时要删除 -->
        <div class="modal-dialog" style="width: 700px;">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close"><span>×</span></button>
              <h4 class="modal-title">头像设置</h4>
            </div>
            <div class="modal-body">
              <div class="admin-tab">
                <ul class="tab-nav">
                    <li class="active">本地上传</li>
                    <li>在线图库</li>
                </ul>
                <div class="tab-cnt upload-imgtab">
                  <div class="tab_pane">
                    <div class="upload-imgbox clearfix">
                      <div class="update-imgbox"><img id="tailoringImg"></div>
                      <div class="docs-preview">
                        <p class="tc">预览</p>
                        <div class="img-preview preview-lg"></div>
                        <p class="tc mb10">150*150</p>
                        <div class="img-preview preview-md"></div>
                        <p class="tc mb10">100*100</p>
                        <div class="img-preview preview-sm"></div>
                        <p class="tc">50*50</p>
                      </div>
                    </div>
                    <div class="tailoring-content-three">
                      <button class="btn btn-blue cropper-reset-btn" title="复位"><i class="fa fa-refresh"></i></button>
                      <button class="btn btn-blue cropper-rotate-btn" title="旋转"><i class="fa fa-repeat"></i></button>
                      <button class="btn btn-blue cropper-big-btn" title="放大"><i class="fa fa-search-plus"></i></button>
                      <button class="btn btn-blue cropper-small-btn" title="缩小"><i class="fa fa-search-minus"></i></button>
                    </div>
                    <div class="upload-imgbtn">
                      <span class="btn btn-green update-btn"><input type="file" accept="image/jpg,image/jpeg,image/png,image/gif" id="fileUpdate"><span class="update-btntxt">选择图片</span></span>
                      <span class="upload-imgtxt">只支持JPG、PNG、GIF，大小不超过5M</span>
                    </div>
                  </div>
                  <div class="tab_pane none">
                    <ul class="online-imgbox clearfix">
                      <li><img src="static/assets/images/user-1.jpg"></li>
                      <li><img src="static/assets/images/user-1.jpg"></li>
                      <li><img src="static/assets/images/user-1.jpg"></li>
                      <li><img src="static/assets/images/user-1.jpg"></li>
                      <li><img src="static/assets/images/user-1.jpg"></li>
                      <li><img src="static/assets/images/user-1.jpg"></li>
                      <li><img src="static/assets/images/user-1.jpg"></li>
                      <li><img src="static/assets/images/user-1.jpg"></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-blue">确定</button>
              <button type="button" class="btn btn-gray">取消</button>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="modal-backdrop in fade"></div> --><!-- 弹窗后面的遮罩层 -->
      <script>
        $(function(){
          $(".avatar-profile").on("click",function(){
            $(".upload-modal").show();
            var src = $(".avatar-profile img").attr("src");
            $('#tailoringImg').cropper('replace', src, false);//默认false，适应高度，不失真
            $(".update-btntxt").text("重新上传");
            var template = '<div class="modal-backdrop in fade"></div>';
            $(template).appendTo("body");
          });

          $("#fileUpdate").change(function(e) {
            var imgBox = e.target;
            uploadImg($('.update-imgbox'), imgBox)
          });

          function uploadImg(element, tag) {
            var file = tag.files[0];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                return false;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                var replaceSrc = evt.target.result;
                //更换cropper的图片
                $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
                $(".update-btntxt").text("重新上传");
            }
            reader.readAsDataURL(file);
          }
          $('#tailoringImg').cropper({
            aspectRatio: 1/1,//默认比例
            preview: '.img-preview',//预览视图
            guides: true,  //裁剪框的虚线(九宫格)
            autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            movable: true, //是否允许移动图片
            dragCrop: false,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
            movable: true,  //是否允许移动剪裁框
            resizable: false,  //是否允许改变裁剪框的大小
            zoomable: true,  //是否允许缩放图片大小
            mouseWheelZoom: true,  //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
            rotatable: true,  //是否允许旋转图片
            crop: function(e) {
                // 输出结果数据裁剪图像。
            }
          });      
          //旋转
          $(".cropper-rotate-btn").on("click",function () {
              $('#tailoringImg').cropper("rotate", 45);
          });
          //复位
          $(".cropper-reset-btn").on("click",function () {
              $('#tailoringImg').cropper("reset");
          });
          //放大
          $(".cropper-big-btn").on("click",function () {
              $('#tailoringImg').cropper('zoom', 0.1);
          });
          //缩小
          $(".cropper-small-btn").on("click",function () {
              $('#tailoringImg').cropper('zoom', -0.1);
          });


          $(".modal-footer").on("click",".btn-blue",function(){
            $(".upload-modal").hide();
            $(".modal-backdrop").remove();
          });

          $(".modal-footer").on("click",".btn-gray",function(){
            $(".upload-modal").hide();
            $(".modal-backdrop").remove();
          });  

          $(".modal-dialog").on("click",".close",function(){
            $(".upload-modal").hide();
            $(".modal-backdrop").remove();
          });  

          $(".tab-nav li").on("click",function(){
            $(".tab-nav li").removeClass("active");
            $(this).addClass("active")
            var index = $(this).index();
            $(this).closest(".admin-tab").find(".tab-cnt .tab_pane").addClass("none").eq(index).removeClass("none");
          });

          $(".work-editform").on("click",function(e){
            e.stopPropagation();
          });
          $(".work-titlename").on("click",function(e){
            var inputVal = $('.user-cnt-tit em').text();
            $(".work_editname").val(inputVal);
            $(".user-cnt-tit").hide();
            $(".work-editform").show();
            $(document).one("click", function(){
              var iVal =  $(".work_editname").val();
              $('.user-cnt-tit em').text(iVal);
                    $(".work-editform").hide();
              $(".user-cnt-tit").show();
                });
                e.stopPropagation();
          });
          $(".work-editform").on("click",".true",function(e){
            e.stopPropagation();
            var inputVal = $(".work_editname").val();
            $('.user-cnt-tit em').text(inputVal);
            $(".user-cnt-tit").show();
            $(".work-editform").hide();
          });
          $(".work-editform").on("click",".false",function(e){
            e.stopPropagation();
            $(".work-editform").hide();
            $(".user-cnt-tit").show();
          });

          $(".work_editname").keypress(function (e) {
            if (e.which == 13) {
              var inputVal = $(".work_editname").val();
              $('.user-cnt-tit em').text(inputVal);
              $(".user-cnt-tit").show();
              $(".work-editform").hide();
            }
        });

        });
      </script>
</body>
</html>
